<template>
  <div class="box">
    <div class="top">
      <i class="iconfont icon-fanhui" @click="fn()"></i>
      <div class="txt">品质推荐￥9.9包邮</div>
      <div class="blank"></div>
    </div>
    <div class="picture">
      <img
        src="https://img.youpin.mi-img.com/jianyu/df53c68e35ba4ff6c3ead4f7e9e54d29.jpeg@base@tag=imgScale&h=278&m=1&q=80&w=750"
      />
    </div>
    <div class="list_top">
      <ul class="list_top_ul">
        <li v-for="item in goods" :key="item.goodsId">
          <span
            v-text="item.goodsName"
            :class="{ active: currentIndex == item.goodsId }"
            @click="selectMenu(item.goodsId)"
          >
          </span>
        </li>
      </ul>
      <div class="list_top_icon">
        <van-icon name="arrow-down" size="25" class="icon" />
      </div>
    </div>
    <template v-for="(category, index) in goods">
      <div class="bottom" v-if="currentIndex == category.goodsId" :key="index">
        <ul v-for="(products, index) in category.second" :key="index">
          <li v-for="(product, index) in products.third" :key="index">
            <img :src="product.goodsImg" alt="" />
            <p>{{ product.goodsName }}</p>
            <h1>{{ product.goodsinfo }}</h1>
            <h3>{{ product.goodsPrice }}</h3>
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      goods: [],
      currentIndex: 1,
    };
  },

  // 请求发送方法1：
  // mounted(){
  //     this.list();
  // },
  // methods:{
  //     async list(){
  //         let ews = await axios({
  //             url:"http://localhost:3000/goods",
  //             methods:"get",
  //         }).then((res)=>(this.goods = res.data))
  //     }
  // }

  // 方法2：
  created() {
    axios({
      // url: "/api/goods",
      url:"/api/xiaomipro/goods/goods1",
      method: "get",
    }).then((res) => (this.goods = res.data.goods,console.log(this.goods)));
  },
  methods: {
    selectMenu(index) {
      this.currentIndex = index;
    },
    fn(){
      this.$router.go(-1)
    }
  },
};
</script>

<style lang = "scss" scoped>
@import url(../assets/font_7af79ekbdrf/iconfont.css);
.box {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 242, 208);
  .top {
    height: 44px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    justify-content: space-between;
    color: black;
    .txt {
      font-size: 20px;
    }
    .iconfont {
      color: black;
      font-weight: bold;
      font-size: 20px;
      margin-left: 10px;
    }
    .blank {
      width: 40px;
      height: 50px;
    }
  }
  .picture {
    width: 100%;
    height: 149px;
    margin-top: 44px;
    img {
      width: 100%;
      height: 139px;
    }
  }
  .list_top {
    width: 95%;
    height: 44px;
    display: flex;
    font-size: 15px;
    margin: auto;
    background-color: rgb(255, 255, 255);
    justify-content: space-between;
    flex: 1;
    .list_top_icon {
      width: 10%;
      height: 44px;
      line-height: 44px;
      .icon {
        width: 100%;
        height: 22px;
        border-left: 1px solid black;
        position: relative;
        top: 40%;
        transform: translateY(-40%);
      }
    }
    .list_top_ul {
      display: flex;
      width: 85%;
      overflow-x: auto;
      text-align: center;
      li {
        width: 88.5px;
        height: 44px;
        line-height: 44px;
        flex-shrink: 0;
      }
      li:nth-child(4) {
        width: 90px;
        height: 44px;
      }
    }
  }
  .bottom {
    width: 95%;
    margin: auto;
    margin-top: 10px;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 33%;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 150px;
        }
        p{
             white-space:nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
        }
        h1{
            font-weight: normal;
            font-size: 10px;
            color: gray;
            white-space:nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
        }
          h3 {
            font-size: 17px;
            font-weight: normal;
            text-align: center;
            text-align: left;
            color: red;
          }
      }
    }
  }
}
</style>